<template>
  <div class="_wz_materialList">
    <dl class="_wz_materialList_Menu_list">
      <dd v-for="item,index in materialList" @click="route(index)" :key="index" :class="{_wz_selsect_materialList:active == index}" style="padding: 15px 15px 15px 0;margin: 10px 10px 0 0;border: 2px solid #EDEEEF;border-radius: 4px;display: flex;">
        <div style="width: 40px;text-align: center;color: #2d8cf0;" v-if="item.type != 3">课<br/>件</div>
        <div style="width: 40px;text-align: center;color: #ff9900;" v-else>试<br/>卷</div>
        <div style="width: calc(100% - 40px);">
          <div style="font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 100%;">{{item.name}}</div>
          <span style="font-size: 12px;color: #ababab;">{{item.typeName}}</span>
          <span style="font-size: 12px;color: #ababab;" v-if="!!item.time">{{item.time}}分钟</span>
        </div>
      </dd>
    </dl>
    <div style="height: 100%;width: calc(100% - 200px);float: left;overflow: auto;padding: 10px;">
      <materialVideo v-if="hackReset" :materialData="materialData" :old="true"></materialVideo>
    </div>
  </div>
</template>
<script>
  import materialVideo from '../public/materialVideo.vue'

  export default {
    components: {
      materialVideo,//视频
    },
    props: ["materialList"],//接收来自父组件的数据
    data() {
      return {
        hackReset: false,
        materialData: {},
        active: 0,//控制显隐
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;
      that.materialData = that.materialList[that.active]
      that.$nextTick(() => {//执行菜单刷新
        that.hackReset = true;
      })
    },
    methods: {//执行的方法
      route(name) {//菜单点击 指定课件详情展示
        let that = this;
        that.active = name;
        that.hackReset = false;
        that.materialData = that.materialList[name];
        setTimeout(function () {
          that.hackReset = true;
        }, 1);
      },
    },
    watch: {//监听

    },


    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>

<style lang="less">


  ._wz_materialList {
    height: 100%;
    position: relative;

    ._wz_materialList_Menu_list {
      width: 200px;
      float: left;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      border-right: 1px solid #EDEEEF;
      cursor: pointer;
      dd:hover{
        background: #FEF7EA;
        border-color: #EFB987!important;
      }
    }

    ._wz_selsect_materialList {
      background: #FEF7EA;
      border-color: #EFB987!important;
    }

    .ivu-menu-item {
      border-bottom: 1px solid #e1e1e1;
      height: 110px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
  }
</style>
